<%--=========================================================================== 
This is the page directive. Sets the content type and encoding.
Encoding of the response: UTF-8
Encoding of this JSP page: Cp1251 
===========================================================================--%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="Cp1251"%>
<%@ taglib uri="/WEB-INF/st4" prefix="st"%>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Additional services</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="styles/st4.css" />

<script type="text/javascript" src="js/jQuery.js"></script>

<script type="text/javascript"> 

	function change(elem){
		var id=elem.id.split('_')[1];
		var val=jQuery('#'+id).html();
		jQuery('#ch_'+id).html("<button style='width:80px;' id='but_"+id+"' onclick='save(this);'>Save</button>");
		jQuery('#'+id).html("<input style='width:150px;' id = 'input_"+id+"' value='"+val+"'/>");
	}
	
	function changePassword(elem){
		var id=elem.id.split('_')[1];
		var val=jQuery('#'+id).html();
		jQuery('#ch_'+id).html("<button style='width:80px;' id='but_"+id+"' onclick='savePassword(this);'>Save</button>");
		jQuery('#'+id).html("<input type='password' style='width:150px;' id = 'input_"+id+"' value='"+val+"'/>");
	}

	function savePassword(elem){
		var id=elem.id.split('_')[1];
		var val=jQuery('#'+id).html();
		var user=jQuery("[name$='user_id']").val();
		var value=jQuery('#input_'+id).val();
		var request="ajax?command=ajax_user_change&id="+id+"&value="+value+"&user_id="+user;
		jQuery.ajax ({
			url: request,
			type: "POST",
			dataType : 'html',
			success: function (data, textStatus) { 
				jQuery('#ch_'+id).html("<button style='width:80px;' id = 'input_"+id+"' onclick='changePassword(this);'>Change</button>");
				jQuery('#'+id).html(data);
			},
			error: function (msg) {
				alert("Error while password recovery");
				jQuery('#'+id).html(data);
			}
		});
	}
	
	function save(elem){
		var id=elem.id.split('_')[1];
		var val=jQuery('#'+id).html();
		var user=jQuery("[name$='user_id']").val();
		var value=jQuery('#input_'+id).val();
		var request="ajax?command=ajax_user_change&id="+id+"&value="+value+"&user_id="+user;
		jQuery.ajax ({
			url: request,
			type: "POST",
			dataType : 'html',
			success: function (data, textStatus) { 
				jQuery('#ch_'+id).html("<button style='width:80px;' id = 'input_"+id+"' onclick='change(this);'>Change</button>");
				jQuery('#'+id).html(data);
			},
			error: function (msg) {
				alert("Error while password recovery");
				jQuery('#'+id).html(data);
			}
		});
	}
</script>
</head>
<body>
	<table class="page">
		<%--========================================================================--%>
		<jsp:include page="/WEB-INF/includes/header.jsp" />
		<jsp:include page="/WEB-INF/includes/menu.jsp" />
		<%--========================================================================--%>
		<tr class="content">
			<td align="center">

					<input type="hidden" name="user_id" value="${user.id}" />
					<h2><st:i18n key="pages.personal_info"/>
					</h2>
					<table class="table" style="width:400px;">
						<tr>
							<td class="left" style="width:100px;"><st:i18n key="pages.email"/>:</td>
							<td class="left" style="width:90px;"  id="ch_email"><button id = "input_email" style="width:80px;" onclick="change(this);">Change</button></td>
							<td class="left" style="width:200px;" id = "email"><c:out value="${user.email}"/></td>
						</tr>
						<tr>
							<td ><st:i18n key="pages.password"/>:</td>
							<td class="left" style="width:90px;"  id="ch_password"><button id = "input_password" style="width:80px;" onclick="changePassword(this);">Change</button></td>
							<td  id = "password"><c:out value="${user.hiddenPassword}"/></td>
						</tr>
						<tr>
							<td ><st:i18n key="pages.name"/>:</td>
							<td class="left" style="width:90px;"  id="ch_name"><button id = "input_name" style="width:80px;" onclick="change(this);">Change</button></td>
							<td id = "name"><c:out value="${user.name}"/></td>
						</tr>
						
						<tr>
							<td><st:i18n key="pages.surname"/>:</td>
							<td class="left" style="width:90px;"  id="ch_surname"><button id = "input_surname" style="width:80px;" onclick="change(this);">Change</button></td>
							<td id = "surname"><c:out value="${user.surname}"/></td>
						</tr>
						
						<tr>
							<td><st:i18n key="pages.status"/>:</td>
							<td></td>
							<td><c:out value="${user.status}"/> </td>
						</tr>
						
						<tr>
							<td><st:i18n key="pages.saving"/>:</td>
							<td></td>
							<td><c:out value="${user.status.saving}$"/> </td>
						</tr>
						
						<tr>
							<td><st:i18n key="pages.role"/>:</td>
							<td "></td>
							<td><c:out value="${user.role}"/> </td>
						</tr>
						
					</table>

			</td>
		</tr>
		<%--========================================================================--%>
		<jsp:include page="/WEB-INF/includes/footer.jsp" />
		<%--========================================================================--%>

	</table>
</body>xr
</html>